<template>
  <div class="main">
    <div class="header">
      <div class="welcome">
        <i>欢迎来到订餐平台</i>
      </div>
      <div class="header-img" @click="backToLogin">
        <el-avatar>{{ nickname }}</el-avatar>
      </div>
    </div>
    <div class="content">
      <div class="left">
        <el-menu default-active="1" class="el-menu-vertical-demo">
          <el-menu-item index="1" @click="changePage(1)">
            <i class="el-icon-user"></i>
            <span slot="title">个人信息</span>
          </el-menu-item>
          <el-menu-item index="2" @click="changePage(2)">
            <i class="el-icon-dish"></i>
            <span slot="title">点餐</span>
          </el-menu-item>
          <el-menu-item index="3" @click="changePage(3)">
            <i class="el-icon-document"></i>
            <span slot="title">我的订单</span>
          </el-menu-item>
          <el-menu-item index="4" @click="changePage(4)">
            <i class="el-icon-bank-card"></i>
            <span slot="title">充值</span>
          </el-menu-item>
          <el-menu-item index="5" @click="changePage(5)">
            <i class="el-icon-key"></i>
            <span slot="title">修改密码</span>
          </el-menu-item>
        </el-menu>
      </div>
      <div class="right">
        <div class="right-page">
          <Information v-show="currentPage === 1"></Information>
          <Dish v-show="currentPage === 2"></Dish>
          <Order v-show="currentPage === 3"></Order>
          <Voucher v-show="currentPage === 4"></Voucher>
          <Password v-show="currentPage === 5"></Password>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Information from "@/components/user/Information";
import Dish from "@/components/user/Dish";
import Order from "@/components/user/Order";
import Voucher from "@/components/user/Voucher";
import Password from "@/components/user/Password";
import cookie from "js-cookie";
import {getNickname} from "@/http/api/user";

export default {
  name: "Shop",
  components: {
    Information,
    Dish,
    Order,
    Voucher,
    Password,
  },
  data(){
    return {
      nickname: '',
      currentPage: 1,
    }
  },
  methods: {
    // 修改页
    changePage(page){
      this.currentPage = page
    },

    // 返回登录页
    backToLogin(){
      this.$router.push('/')
    },

    // 加载昵称
    async loadNickname(){
      let result = await getNickname({
        userId: cookie.get('userId'),
      })
      if (result.code === 0) {
        this.nickname = result.data.nickname
      }
    },
  },

  async mounted() {
    await this.loadNickname()
  }
}
</script>

<style lang="less" scoped>
.main {
  .header {
    height: 60px;
    width: 80%;
    margin: 0 auto;
    border-bottom: 2px solid #666;
    .welcome {
      float: left;
      width: 80%;
      font-size: 40px;
      color: red;
    }
    .header-img {
      float: right;
      width: 40px;
      height: 70%;
      padding-top: 10px;
      padding-right: 10px;
    }
  }

  .content {
    display: flex;
    width: 80%;
    margin: 0 auto;

    .left {
      width: 40%;
      flex: 1;
    }

    .right {
      width: 60%;
      flex: 4;

      .right-page {
        width: 90%;
        margin: 20px auto 50px;
      }
    }
  }
}
</style>